<template>
	<div class="follow">
		<el-tabs v-model="activeName">
			<el-tab-pane label="IP订阅" name="first">
				<ul class="res_data_ip">
					<li class="clear" :style="index === 0 && 'border: none'" v-for="(item,index) in res_data_ip" :key="item.ip_id">
						<router-link :to="{path: `ip/${item.ip_id}`}" target="_blank">
							<div class="avatar">
								<img :src="imgBaseUrl+item.pic" />
							</div>
							<div class="name">
								{{ item.ip_name?item.ip_name:(item.title||'已下架') }}
							</div>
						</router-link>
						<div class="add_time">
							{{ item.add_time }}
						</div>
						<div class="unFollowBtn">
							<el-button type="info" size="mini"  v-if="item.ip_id" @click="unFollow(item,'res_data_ip',item.ip_id)">取消订阅</el-button>
							<span v-else>已下架的IP</span>
						</div>
					</li>
				</ul>
				<div class="loading-more">
					<span class="btn" @click="getResData_ip" v-if="pageBtn_ip">加载更多...</span>
					<span v-else>没有更多了...</span>
				</div>
			</el-tab-pane>
			<el-tab-pane label="专题订阅" name="second">
				<ul class="res_data_sb">
					<li class="clear" :style="index === 0 && 'border: none'" v-for="(item,index) in res_data_sb" :key="item.subject_id">
						<router-link :to="{path: `subject/${item.subject_id}`}" target="_blank">
							<div class="name">
								{{ item.subject_name?item.subject_name:(item.title||'已下架')}}
							</div>
						</router-link>
						<div class="add_time">
							{{ item.add_time }}
						</div>
						<div class="unFollowBtn">
							<el-button type="info" size="mini" v-if="item.subject_id" @click="unFollow(item,'res_data_sb',item.subject_id)">取消订阅</el-button>
							<span v-else>已下架的专题</span>
						</div>
					</li>
				</ul>
				<div class="loading-more">
					<span class="btn" @click="getResData_sb" v-if="pageBtn_sb">加载更多...</span>
					<span v-else>没有更多了...</span>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import { subscriptionGetlist, subscriptionAdd, subscriptionDel, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
	data() {
		return {
			imgBaseUrl,
			activeName: 'first',
			res_data_ip: [],
			res_data_sb: [],
			pageBtn_ip: false,
			pageBtn_sb: false,
			page_ip: 1,
			page_sb: 1,
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	mounted() {
		this.getResData_ip();
		this.getResData_sb();
	},
	methods: {
		...mapActions([
			'getUserInfo'
		]),
		...mapMutations([
			'DIALOG_LOGIN',
			'OUT_LOGIN',
		]),

		unFollow(item,res_data,obj_id){
			if(this.login){
				let para = {
					user_id: this.userInfo.user_id,
					obj_id: obj_id,
				}
				subscriptionDel(para).then(res => {
					if(res.data){
						var index = this[res_data].indexOf(item)
						if (index !== -1) {
							this[res_data].splice(index, 1);
						}
					}else{
						if(!res.tologin){
							this.$message.warning(res.msg);
						}else{
							this.$router.push('/');
							this.DIALOG_LOGIN();
						}
					}
				});
			}else{
				this.$router.push('/');
				this.OUT_LOGIN();
			}
		},
		getResData_ip(){
			
			let para = {
				user_id: this.userInfo.user_id,
				type: 1,
				page: this.page_ip,
				pagesize: 5,
			};

			subscriptionGetlist(para).then(res => {
				if(res.data){
					if(this.page_ip===1){
						this.res_data_ip = res.data
						if(res.total>5){
							this.pageBtn_ip = true;
						}else{
							this.pageBtn_ip = false;
						}

					}else{
						this.res_data_ip = this.res_data_ip.concat(res.data);
					}
					let pageTotal = Math.ceil(res.total/5);
					if(this.page_ip<pageTotal){
						this.page_ip++;
					}else{
						this.pageBtn_ip = false;
					}

				}else{
					if(!res.tologin){
						this.$message.warning(res.msg);
					}else{
						this.$router.push('/');
						this.DIALOG_LOGIN();
					}
				}
			});
		},

		getResData_sb(){
			
			let para = {
				user_id: this.userInfo.user_id,
				type: 2,
				page: this.page_sb,
				pagesize: 5,
			};

			subscriptionGetlist(para).then(res => {
				if(res.data){
					if(this.page_sb===1){
						this.res_data_sb = res.data
						if(res.total>5){
							this.pageBtn_sb = true;
						}else{
							this.pageBtn_sb = false;
						}

					}else{
						this.res_data_sb = this.res_data_sb.concat(res.data);
					}
					let pageTotal = Math.ceil(res.total/5);
					if(this.page_sb<pageTotal){
						this.page_sb++;
					}else{
						this.pageBtn_sb = false;
					}

				}else{
					if(!res.tologin){
						this.$message.warning(res.msg);
					}else{
						this.$router.push('/');
						this.DIALOG_LOGIN();
					}
				}
			});
		},
	},
}
</script>

<style scoped lang="scss">
.res_data_ip{
	li {
		border-top: 1px solid #ccc;
		padding: 10px 0;
	}
	.avatar {
		float:left;
		width: 50px;
		height: 50px;
		overflow: hidden;
		border-radius: 50%;
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
		margin-right: 20px;
	}
	.name {
		float: left;
		width: 200px;
		margin-top: 15px;
	}
	.add_time{
		float: left;
		width: 200px;
		margin-top: 15px;
	}
	.unFollowBtn{
		float: right;
		margin-top: 10px;
	}
	
}
.res_data_sb {
	li {
		border-top: 1px solid #ccc;
		padding: 10px 0;
		height: 50px;
		line-height: 30px;
	}
	.name {
		float: left;
		width: 270px;
		margin-top: 0px;
	}
	.add_time{
		float: left;
		width: 200px;
		margin-top: 0px;
	}
	.unFollowBtn{
		float: right;
		margin-top: 0px;
	}
}
</style>